<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      :rules="rules">
    <el-form-item label="产品名称" prop="productName">
      <el-input v-model="ruleForm.productName" placeholder="请输入产品名称"/>
    </el-form-item>
    <el-form-item label="产品类型" prop="productType">
      <el-radio-group v-model="ruleForm.productType">
        <el-radio v-for="(item, idx) of productTypeOptions" :label="item.value" :key="idx">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="产品产地" prop="productOrigin">
      <el-input v-model="ruleForm.productOrigin" placeholder="请输入产品产地"/>
    </el-form-item>
    <el-form-item label="产品描述" prop="productDescription">
      <el-input v-model="ruleForm.productDescription" placeholder="请输入产品描述" type="textarea" rows="5" />
    </el-form-item>
    <el-form-item label="产品营养成分" prop="productNutrition">
      <el-select
          v-model="ruleForm.productNutrition"
          multiple
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          placeholder="请选择或输入产品营养成分"
          class="w-full"
      >
        <el-option
            v-for="item in productNutritionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  productName: '', // 产品名称
  productType: 'vegetable', // 产品类型
  productOrigin: '', // 产品产地
  productDescription: '', // 产品描述
  productNutrition: undefined, // 产品营养成分
})

const productTypeOptions = [
  { label: '水果', value: 'fruit' },
  { label: '蔬菜', value: 'vegetable' },
  { label: '肉类', value: 'meat' },
  { label: '水产', value: 'aquatic' },
  { label: '禽类', value: 'poultry' },
  { label: '蛋类', value: 'egg' },
  { label: '其他', value: 'other' },
]

const productNutritionOptions = [
  { label: '蛋白质', value: 'protein' },
  { label: '脂肪', value: 'fat' },
  { label: '碳水化合物', value: 'carbohydrate' },
  { label: '维生素', value: 'vitamin' },
  { label: '矿物质', value: 'mineral' },
  { label: '其他', value: 'other' },
]

const rules = reactive<FormRules<typeof ruleForm>>({
  productName: [{ required: true, message: '请输入产品名称', trigger: 'change' }],
  productType: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
  productOrigin: [{ required: true, message: '请输入产品产地', trigger: 'change' }],
  productDescription: [{ required: true, message: '请输入产品描述', trigger: 'change' }],
  productNutrition: [{ required: false, message: '请输入产品营养成分', trigger: 'change' }],
})

defineExpose({
  ruleFormRef,
  ruleForm,
  rules,
})
</script>

<style lang="scss" scoped>

</style>
